<template>
  <div class="artist-detail">
    <scroll ref="scroll"
            class="artist-scroll-c">
      <artist-base-info :desc='artistDesc'
                        :baseInfo="getArtistInfo" />
      <artist-bar ref="artistBar"
                  :list="barlist"
                  :aid="artist" />
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </scroll>
  </div>
</template>

<script>
import ArtistBaseInfo from './childComps/ArtistBaseInfo'
import ArtistBar from './childComps/ArtistBar'
import { _getArtistDesc, _getArtistInfo } from 'network/artist'
import Scroll from 'components/common/scroll/Scroll.vue'
export default {
  name: 'ArtistDetail',
  components: {
    ArtistBaseInfo,
    ArtistBar,
    Scroll
  },
  data () {
    return {
      artist: null,
      // 歌手介绍
      artistDesc: null,
      barlist: ["专辑", "MV", "歌手详情", "相似歌手"],
      // 歌手信息
      getArtistInfo: null
    }
  },
  created () {
    this.artist = this.$route.params.id;
    _getArtistDesc(this.artist).then(res => {
      this.artistDesc = res.data.briefDesc;
    })
    _getArtistInfo(this.artist).then(res => {
      this.getArtistInfo = res.data.data.artist;
    })
  }
}
</script>

<style scoped>
.artist-detail {
  width: 100%;
  padding: 20px 2%;
  box-sizing: border-box;
  font-size: 13px;
  height: 100%;
  background: #fff;
  overflow: hidden;
}
.artist-scroll-c {
  height: 100%;
}
</style>
